<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			* {
				margin: 0;
				padding: 0;
			}
			
			ul {
				list-style-type: none;
				overflow: hidden;
				text-align: center
			}
			
			li {
				float: left;
				border: 1px solid black;
			}
			
	#div1 {
				height: 50px;
				width: 240px;
				background-color: black;
				color: white;
			}
			#div2 {
				height: 50px;
				width: 240px;
				background-color: red;
				color: white;
			}
			#div3 {
				height: 50px;
				width: 240px;
				background-color: blue;
				color: white;
			}
			#div4 {
				height: 50px;
				width: 240px;
				background-color: skyblue;
				color: white;
			}
		</style>
	</head>

	<body>
		<div id="box">
			<ul>
				<li onclick="fun1()">选项卡1</li>
				<li onclick="fun2()">选项卡2</li>
				<li onclick="fun3()">选项卡3</li>
				<li onclick="fun4()">选项卡4</li>
			</ul>
			<div id="div1"style="display: none;">内容1</div>
			<div id="div2"style="display: none;">内容2</div>
			<div id="div3"style="display: none;">内容3</div>
			<div id="div4"style="display: none;">内容4</div>
		</div>
		<script type="text/javascript">
			
//			function yi () {
//				document.getElementById("div1").style.display="block"
//				var div1=document.getElementById("div1");
//				div1.style.display="block";
//				document.getElementById("div2").style.display="none"
//			}
            function fun1 () {
            	document.getElementById("div1").style.display="block";
            	document.getElementById("div2").style.display="none";
            	document.getElementById("div3").style.display="none";
            	document.getElementById("div4").style.display="none";
            }
             function fun2 () {
            	document.getElementById("div1").style.display="none";
            	document.getElementById("div2").style.display="block";
            	document.getElementById("div3").style.display="none";
            	document.getElementById("div4").style.display="none";
            }
              function fun3 () {
            	document.getElementById("div1").style.display="none";
            	document.getElementById("div2").style.display="none";
            	document.getElementById("div3").style.display="block";
            	document.getElementById("div4").style.display="none";
            }
               function fun4 () {
            	document.getElementById("div1").style.display="none";
            	document.getElementById("div2").style.display="none";
            	document.getElementById("div3").style.display="none";
            	document.getElementById("div4").style.display="block";
            }
		</script>
	</body>

</html>